<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
<link type="text/css" rel="stylesheet" href="css/popup.css">
<link type="text/css" rel="stylesheet" href="css/ui.css">
<link type="text/css" rel="stylesheet" href="js/plugins/imgareaselect-0.9.10/css/imgareaselect-default.css">
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/plugins/photoUpload/jquery.ocupload-1.1.2.js"></script>
<script type="text/javascript" src="js/plugins/imgareaselect-0.9.10/scripts/imgareaselect.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
	<script type="text/javascript" src="js/jquery.tools.js"></script>
	<script type="text/javascript" src="js/jquery.uniform.min.js"></script>
	
<script>
$(document).ready(function()
{
	var prev_avatar;	
	
	$('input[name="crop_cancel"]').live
	(	
		'click',
		 function()
		 {			 
			 $('#photo_review').fadeOut(300);
			 $('#photo_crop').html("");
			 $('#avatar img').attr('src', prev_avatar);
			 $('#avatar img').removeAttr('style');
			 $('div[class^="imgarea"]').hide();
		 }
	);

	$('input[name="save_crop"]').live
	(	
		 'click',
		 function()
		 {			 
			 $('input[name="submit_crop"]').click();
			 saved_crop();
		 }		 
	);
	
	function saved_crop()
	{
		 $('#photo_crop').html("<p class='avatar_loaded'>Аваратка успешно сохранена</p>");
		 $('div[class^="imgarea"]').hide();
		 function hide_crop() 
		 {
			 $('#photo_review').fadeOut(300);
			 $('#photo_crop').html("");
			 clearInterval(intervalID);
		 };
		 
		 var intervalID = setInterval(hide_crop, 2000);
		 
		 
	};
	
	function preview(img, selection) 
	{
		 var scaleX = 182 / (selection.width || 1);
		 var scaleY = 258 / (selection.height || 1);
	
		 $('#avatar img').css
		 ({
			 width: Math.round(scaleX * $("#photo_review img").width()) + 'px',
			 height: Math.round(scaleY * $("#photo_review img").height()) + 'px',
			 marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
			 marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
		 });
    };
	
	$('#upload_photo').upload
	({
		 name: 'file',
		 method: 'post',
		 enctype: 'multipart/form-data',
		 action: 'upload.php',
		 onSubmit: function()
			{
				$('#progress1').text('Отправка файла...');
				prev_avatar=$('#avatar img').attr('src');
			},
		onComplete: function(data) 
		{			 
			 var url=data.substring(0,data.indexOf('width:'));
			 var width=data.substring(data.indexOf('width:')+6);
			 $('#progress1').text('');
			 $('#avatar img').attr('src', url);
			 $('#photo_crop').html("<img src='"+url+"'/>");
			 $('#photo_crop').width(width);
			 $('#photo_crop img').after("<p><input class='button' name='save_crop' type='button' value='Сохранить'/></p>");
			 $('#photo_crop p input').after("<input class='button' name='crop_cancel' type='button' value='Отмена'/>");
			 $('#photo_review').fadeIn(300);
			
			$('#photo_crop img').imgAreaSelect
			({
				 handles: true,
				 aspectRatio: '182:258',		
				 onSelectChange: preview,
				 onSelectEnd: function ( image, selection )
				 {

					$('input[name=x1]').val(selection.x1);
					$('input[name=y1]').val(selection.y1);
					$('input[name=x2]').val(selection.x2);
					$('input[name=y2]').val(selection.y2);
					$('input[name=w]').val(selection.width);
					$('input[name=h]').val(selection.height);
				 }
			});
		
			 $('#avatar').insertAfter($('#photo'));			
		}
	});
		

});
</script >

<title>Powerlifting-unites - My Account</title>
</head>
<body>
	<div id="container">
		 <div id="header">
			 <div id="logo">
			 </div>	
		 </div>
		 <div id="menu">
			 <ul class="menu sf-js-enabled">
				 <li>
					 <a href="#">НОВОСТИ</a>						
				 </li>
				 <li>
					 <a href="#">ПОИСК</a>
				 </li>
				 <li>
					 <a href="#">МОИ ФОТО</a>
				 </li>
				 <li class="cat_3">
					 <a href="#">МОИ ВИДЕО</a>
				 </li>
				 <li>
					 <a href="#">МОИ СООБЩЕНИЯ</a>
				 </li>
				 <li>
					 <a href="#">МОИ ОБЪЯВЛЕНИЯ</a>
				 </li>				 
		     </ul>
		 </div>
		 <div class="main-container">
			 <div id="wrap_container">
				 <div id="column-left">
				 	 <div class="box">
						 <div class="box-heading">
							 Моя страница
						 </div>
						 <div class="box-content">
							 <ul class="acount">
								 <li>
									 <a href=#">Личные данные</a>
								 </li>
								 <li>
									 <a href=#">Мои сообщения</a>
								 </li>
								 <li>
									 <a href=#">Мои фото</a>
								 </li>
								 <li>
									 <a href=#">Мои видео</a>
								 </li>
								 <li>
									 <a href=#">Мои объявления</a>
								 </li>
								 <li>
									 <a href=#">Мои статьи</a>
								 </li>
								 <li>
									 <a href=#">Мои друзья</a>
								 </li>
							 </ul>
						 </div>
					 </div>	
				 </div>	
				 <div id="content">
					 <div class="breadcrumb">
						 <span>Личные данные<span>
					 </div>
					 <div class="box_rel">
						 <div id="results">
							 <div id="result_squat">
								 <div id="squat_pic">
								 </div>
								 <span>250 кг</span>
							 </div>
							 <div id="result_bp">
								 <div id="bp_pic">
								 </div>
								 <span>170 кг</span>
							 </div>
							 <div id="result_dl">
								 <div id="dlift_pic">
								 </div>
								 <span>230кг</span>
							 </div>
							 <div class="clear"></div>
						 </div>
						 <div id="main_avatar">
							  <div id="avatar">
								 <img src="images/no_avatar.png" alt="no_avatar"/>
							 </div>
							 <a id="upload_photo" href="#">Загрузить</a>
							 <span id="progress1"></span>
					     </div>
						 <div id="personal">
							 <div id="name">
								 <span class="first_last_name">Савин Виталий</span>
								 <span class="edit"></span>
							 </div>
							 <div id="birth">
								 <span class="personal_title">Дата рождения:</span>
								 <span>29 сентября 1987 года</span>
							 </div>
							 <div id="city">
								 <span class="personal_title">Город:</span>
								 <span class="birth">Украина, Запорожская область, Запорожье</span>
							 </div>
							 <div id="heigth">
								 <span class="personal_title">Рост:</span>
								 <span>174 см</span>
							 </div>
							 <div id="weigth">
								 <span class="personal_title">Вес:</span>
								 <span>73 кг</span>
							 </div>							 
							 <div id="dead_lift">
								 <span class="personal_title">Федерации:</span>
								 <span>IPF</span>
							 </div>
							 <div id="dead_lift">
								 <span class="personal_title">Звание/разряд:</span>
								 <span>Мастер Спорта</span>
							 </div>
						 </div>
						 <div class="clear"></div>
						 <div id="photo_review">
							 <div class="breadcrumb">
								 Выделите мышкой участок фото, который будет на аватарке
							 </div>
							 <div id="photo_crop">
								 
							 </div>
						 </div>						
						 <form id="form_crop" style="display:none;" action="javascript:void(null);" onsubmit="ajax_send_crop_data();" method="post">
							<input type="hidden" name="x1" value="" />
							<input type="hidden" name="y1" value="" />
							<input type="hidden" name="x2" value="" />
							<input type="hidden" name="y2" value="" />
							<input type="hidden" name="w" value="" />
							<input type="hidden" name="h" value="" />
							<input type="submit" name="submit_crop" value="Crop" />
						</form>
					 </div>
				 </div>	
			 </div>	
		 </div>		
	</div>
	<!-- popup -->
	 <div id="popup_edit" class="popup_edit">
	 <h2 class="box-head">Редактирование личных данных</h2>
	 <div class="popup-content">
		<!-- 
    	 <p>Developer status: 
		 <select name="bug_status">
             <option value="In progress">In progress</option>
		     <option value="Fixed">Fixed</option>
			 <option value="Not reproduced">Not reproduced</option>
			 <option value="Not a bug">Not a bug</option>
		 </select>	
	</p>
	 -->
	 	 
	 <table cellspacing="5">
		 <tr>
			 <td><span class="personal_title">Имя:</span></td>
			 <td><input type="text" class="field" name="user_name" value=""/></td>
		 </tr>
			 <td><span class="personal_title">Фамилия:</span></td>
			 <td><input type="text" class="field" name="user_surname" value=""/></td>
		  <tr>
			 <td><span class="personal_title">Дата рождения:</span></td>
			 <td>
				 <select name="day_of_birth">					
					 <option value="1">1</option>
					 <option value="2">2</option>					
				 </select>	
				  <select name="month_of_birth">					
					 <option value="1">Января</option>
					 <option value="2">Февраля</option>									
				 </select>				  
				 <select name="year_of_birth">					
					 <option value="1990">1990</option>
					 <option value="1991">1991</option>									
				 </select>
			 </td>
		 </tr>
		<tr>
			 <td><span class="personal_title">Страна:</span></td>
			 <td>
				 <select name="contry">					
					 <option value="201">Украина</option>
					 <option value="202">Россия</option>					
				 </select>	
			 </td>
		 </tr>
		 <tr>
			 <td><span class="personal_title">Регион:</span></td>
			 <td>
				<select name="region">					
					 <option value="152">не выбрано</option>
					 <option value="254">Февраля</option>									
				 </select>					
			 </td>
		 </tr>
		 <tr>
			 <td><span class="personal_title">Город:</span></td>
			 <td>							  
				 <select name="city">					
					 <option value="32">не выбрано</option>
					 <option value="534">Балабино</option>									
				 </select>
			 </td>
		 </tr>
		 <tr>
			 <td><span class="personal_title">Рост:</span></td>
			 <td>
				 <select name="height" class="field_weight">					
					 <option value="140">140</option>
					 <option value="141">141</option>								
				 </select>	
				 <span class="offset_left">см</span>
			 </td>
		 </tr>
		 <tr>
			 <td><span class="personal_title">Вес:</span></td>
			 <td>
				 <select name="weigth" class="field_weight">					
					 <option value="35">35</option>
					 <option value="36">36</option>									
				 </select>
				 <span class="offset_left">кг</span>					
			 </td>
		 </tr>
	 </table>
	 <table>
		 <tr>
			 <td>	
				 <span class="personal_title">Приседания:</span>
				 <input type="text" class="field_result" name="squat" value=""/>
			 </td>
			 <td>
				 <span class="personal_title">Жим:</span>
				 <input type="text" class="field_result" name="press" value=""/>
			 </td>
			 <td>
				 <span class="personal_title">Становая тяга:</span>
				 <input type="text" class="field_result" name="deadlift" value=""/>			 
			 </td>
		 </tr>
	 </table>
	 <table>
		 <tr>
			 <td rowspan="2" style="vertical-align:middle;">
				 <span class="personal_title">Федерации:</span>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="ipf" />IPF
				 <div class="clear"></div>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="wpc" />WPC
				 <div class="clear"></div>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="wpo" />WPO
				 <div class="clear"></div>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="gpc" />GPC
				 <div class="clear"></div>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="wdfpf" />WDFPF
				 <div class="clear"></div>
			 </td>
		 </tr>	
		 <tr>
			 <td>
				 <input type="checkbox" class="checkbox" name="awpc" />AWPC
				 <div class="clear"></div>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="ipa" />IPA
				 <div class="clear"></div>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="gpu" />GPU
				 <div class="clear"></div>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="udfpf" />UDFPF
				 <div class="clear"></div>
			 </td>
			 <td>
				 <input type="checkbox" class="checkbox" name="raw" value="wdfpf"/>RAW
				 <div class="clear"></div>
			 </td>			 
		 </tr>	  
	 </table>
	 <table>
		 <tr>
			 <td> 
				 <span class="personal_title">Звание/разряд:</span>
			 </td>
			 <td> 
				 <select name="weigth" class="field_titul">					
					 <option value="1">КМС</option>
					 <option value="2">МС</option>									
				 </select>
			 </td>
		 </tr>	 
	 </table>
    <p><input name="save_my_account_data" type="button" class="button" value="Сохранить" onclick="save_my_account_data()"/></p>   
     </div>
     <div class="btn-close"></div>
	 </div>
	
	<!-- end popup -->
	 <div id="hide-layout" class="hide-layout">
	 </div>
</body>
</html>